<template>
  <el-form :inline="true" :model="form" class="demo-form-inline">
    <el-form-item label="线路名称：">
      <el-input v-model="form.lineName" placeholder="请输入线路名称" />
    </el-form-item>
    <el-form-item label="起点：">
      <el-cascader  :options="options" :props="props1" clearable @change="handleChange"  />
    </el-form-item>
    <el-form-item label="终点：">
      <el-cascader  :options="options2" :props="props2" clearable @change="handleChange2"  />
    </el-form-item>
    <el-form-item label="是否外协：">
      <el-select v-model="form.lineWhether" placeholder="全部" style="width: 200px;">
        <el-option label="是" :value="true" />
        <el-option label="否" :value="false" />
      </el-select>
    </el-form-item>
    <el-form-item label="货主手机号：">
      <el-input v-model="form.ownerPhone" placeholder="请输入货主手机号"/>
    </el-form-item>
    <el-form-item label="货主单位：">
      <el-input v-model="form.ownerUnit" placeholder="请输入货主单位" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
      <el-button type="primary" @click="chongzhi">重置</el-button>
      <el-button type="primary" @click="exportExcel()">导出</el-button>
    </el-form-item>
  </el-form>
  
  <el-button type="primary" @click="TiaoAdd">新增</el-button>
  <el-button type="primary" @click="pishan">删除</el-button>

  <el-table :data="filterTableData" style="width: 100%" @selection-change="handleSelectionChange" >
    <el-table-column type="selection" :selectable="selectable" width="55" />
    <el-table-column label="线路名称" prop="lineName" />
    <el-table-column label="起点" prop="startingPoint" >
      <template v-slot="qd">
        {{ qd.row.startingPoint }}-{{ qd.row.riseFullAddress }}
      </template>
    </el-table-column>
    <el-table-column label="终点" prop="terminal" >
      <template v-slot="zd">
        {{ zd.row.terminal }}-{{ zd.row.terminalFullAddress }}
      </template>
    </el-table-column>
    <el-table-column label="是否外协" prop="lineWhether" >
        <template v-slot="wx">
            <span v-if="wx.row.lineWhether==true" >是</span>
            <span v-if="wx.row.lineWhether==false" >否</span>
        </template>
    </el-table-column>
    <el-table-column label="货主姓名" prop="ownerName" />
    <el-table-column label="货主手机号" prop="ownerPhone" />
    <el-table-column label="货主单位" prop="ownerUnit" />
    <el-table-column label="备注" prop="lineRemark" />
    <el-table-column label="创建时间" prop="createDate" >
      <template v-slot="sj">
        {{ sj.row.createDate.substring(0,10) }} {{ sj.row.createDate.substring(11,19) }}
      </template>
    </el-table-column>
    <el-table-column label="状态" prop="lineState" >
      <template v-slot="zt" >
        <el-switch v-model="zt.row.lineState" active-text="" inactive-text="" />
      </template>
    </el-table-column>
    <el-table-column align="right">
      <template #default="scope">
        <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button
          size="small"
          type="primary"
          @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
        <el-button size="small" type="primary" @click="handleshow(scope.$index, scope.row)">
          查看
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <table>
    <tr>
      <td>
        <el-pagination
      v-model:current-page="fen.pageIndex"
      v-model:page-size="fen.pageSize"
      :page-sizes="[2, 3, 4, 5]"
      prev-text="上一页"
      next-text="下一页"
      :background="true"
      layout="total, slot ,sizes"
      :total="fen.plistcount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    数据/共{{ fen.pagecount }}页
  </el-pagination>
      </td>
      <td>
        <el-pagination
      v-model:current-page="fen.pageIndex"
      v-model:page-size="fen.pageSize"
      :page-sizes="[2, 3, 4, 5]"
      prev-text="上一页"
      next-text="下一页"
      :background="true"
      layout="slot,prev, pager"
      :total="fen.plistcount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
        <el-button @click="handleCurrentChange(1)" :disabled="fen.pageIndex==1" >首页</el-button>
  </el-pagination>
      </td>
      <td>
        <el-pagination
      v-model:current-page="fen.pageIndex"
      v-model:page-size="fen.pageSize"
      :page-sizes="[2, 3, 4, 5]"
      prev-text="上一页"
      next-text="下一页"
      :background="true"
      layout=" next, slot,jumper"
      :total="fen.plistcount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    <el-button @click="handleCurrentChange(fen.pagecount)" :disabled="fen.pageIndex==fen.pagecount" >尾页</el-button>
  </el-pagination>
      </td>
    </tr>
  </table>
</template>
<script setup lang="ts">
import axios from 'axios'
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter();
//跳转添加页方法
const TiaoAdd = () => {
    router.push("/FoundationAdd")
}
//生命周期函数钩
onMounted(function () {
    jilian();
    jilian2();
    onSubmit();
})
//查询条件
const form = ref({
    lineName: "",
    startingPoint: "",
    terminal: "",
    lineWhether: "",
    ownerPhone: "",
    ownerUnit:""
})
//分页条件
const fen = ref({
    pageIndex: 1,
    pageSize: 15,
    plistcount: 0,
    pagecount:0
})
//显示字段
const filterTableData = ref([])
//起点级联方法
const options = ref([])
const props1 = {
    checkStrictly: true,
    expandTrigger: 'hover' as const,
    value: "label",
}
const handleChange = (value:any) => {
    console.log(value)
    form.value.startingPoint = value.join("-")
  console.log(form.value.startingPoint)
}
//级联显示方法
const jilian = () => {
    axios.get("FoundationRead/api/Foundation/GetCascadeDTO?superiorId=0")
        .then(res => {
            options.value = res.data.data;
            console.log(res.data.data)
        })
    
}
//终点级联方法
const options2 = ref([])
const props2 = {
    checkStrictly: true,
    expandTrigger: 'hover' as const,
    value:"label"
}
const handleChange2 = (value:any) => {
    console.log(value)
    form.value.terminal = value.join("-")
}
//级联显示方法
const jilian2 = () => {
    axios.get("FoundationRead/api/Foundation/GetCascadeDTO?superiorId=0")
        .then(res => {
            options2.value = res.data.data;
            console.log(res.data.data)
        })
    
}
//显示方法
const onSubmit = () => {
    axios.get("FoundationRead/api/Foundation/GetLine", {
        params: {
            lineName: form.value.lineName,
            startingPoint: form.value.startingPoint,
            terminal: form.value.terminal,
            lineWhether: form.value.lineWhether||null,
            ownerPhone: form.value.ownerPhone,
            ownerUnit: form.value.ownerUnit,
            pageIndex: fen.value.pageIndex,
            pageSize:fen.value.pageSize
        }
    })
        .then(res => {
          filterTableData.value = res.data.data.plist;
            fen.value.plistcount = res.data.data.plistcount;
            fen.value.pagecount = res.data.data.pagecount;
            console.log(res.data.data)
    })
}
//重置按钮
const chongzhi = () => {
  form.value.lineName= "",
    form.value.startingPoint= "",
    form.value.terminal="",
    form.value.lineWhether= "",
    form.value.ownerPhone= "",
    form.value.ownerUnit=""
}
//分页方法
const handleSizeChange = (val: number) => {
  fen.value.pageSize = val;
  onSubmit();
}
const handleCurrentChange = (val: number) => {
  fen.value.pageIndex = val;
  onSubmit();
}
//删除方法
const
  handleDelete = (index: number, row: any) => {
    
  ElMessageBox.confirm(
    '确定要删除嘛',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.post("FoundationWrite/api/WeatherFoundation/DeleteLine?lineId=" + row.lineId)
        .then(res => {
          if (res.data.data>0)
          {
            ElMessage.success("线路删除成功")
            onSubmit();
          }
          else  
          {
            ElMessage.error("线路删除失败")
            return;
          }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

//批量删除
const pi:any = ref([])
const handleSelectionChange = (val: any) => {

  val.forEach((a:any) => {
    pi.value.push(a.lineId);
  });
}
//批量删除方法
const pishan = () => {
  if (pi.value.length==0)
    {
      ElMessage.error("至少选中一项")
      return;
  }
  ElMessageBox.confirm(
    '确定要删除嘛',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      console.log(pi.value)
      axios.post("FoundationWrite/api/WeatherFoundation/LineDeletees", {
        reslist:pi.value
      })
    .then(res => {
      if (res.data.data>0)
      {
        ElMessage.success("批量删除成功")
        onSubmit();
      }
      else  
      {
        ElMessage.error("批量删除失败")
        return;
      }
    })
    })
  
}
//编辑
const handleEdit = (index: number, row: any) => {
  router.push({
    path: "FoundationUpdate",
    query: ({
      lineId:row.lineId
    })
  })
}
//查看
const handleshow = (index: number, row: any) => {
   router.push({
    path: "FoundationFanTian",
    query: ({
      lineId:row.lineId
    })
  })
}
//导出方法
// const DaoChu = () => {
//   location.href = `ReadFoundation/api/Foundation/LineExportScpreListToExcel?pageIndex=${fen.value.pageIndex}&pageSize=${fen.value.pageSize}&lineName=${form.value.lineName}&startingPoint=${form.value.startingPoint}&terminal=${form.value.terminal}&lineWhether=${form.value.lineWhether}&ownerPhone=${form.value.ownerPhone}&ownerUnit=${form.value.ownerUnit}`
// }
import * as XLSX from 'xlsx';
const exportExcel = () => {
    const worksheet = XLSX.utils.json_to_sheet(pi.value);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
    const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
    const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const fileName = '线路导出数据.xlsx';
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = fileName;
    link.click();
    URL.revokeObjectURL(link.href);
};
</script>